<template>
<!--库存查询-->
  <div style="height: 100%;">
    <div class="find-box">
      <div style="display: flex;margin-left: 20px;padding-top: 10px">
        <a href="#"><div style="display: flex" @click="firstLoading">
          <i class="icon-kucunchaxun1" style="margin-top: 4px"></i>
          <h3>&nbsp;&nbsp;库存查询</h3>
        </div>
        </a>

<SelectByCondition style="margin-left: 970px" @selectMsgWay="selectMsgWay"/>
      </div>

      <div class="find-box-detail">
        <el-table
          v-loading="loading"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          size="small"
          :data="dataList"
          height="561"
          style="width: 100%"
          @selection-change="handleSelectionChange" >

          <el-table-column
            align="center"
            label="库存编号"

            width="120"
            >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 14px">{{scope.row.inventoryId}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="产品名称"
            width="250"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 14px">{{scope.row.smallType.smallTypeName}}</span>
              <span style="font-weight: bold;font-size: 13px;color: #ff3526">【{{scope.row.specification}}】</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="理算尺寸/规格"
            width="230"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 18px">{{checkType(scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="单位"
            width="100"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 14px">{{checkUnitTest(scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="库房名称"
            width="190"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.warehouse.warehouseId!==3"  style="font-weight: bold;font-size: 14px">{{scope.row.warehouse.warehouseName}}</span>
              <span v-if="scope.row.warehouse.warehouseId===3"  style="font-weight: bold;font-size: 14px;color: #ff3526">库存不足</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="库存数量"
            width="200"
          >
            <template slot-scope="scope">
              <span :class="[{'quantitydetail':scope.row.quantity<=0}]" style="font-weight: bold;font-size: 14px">{{checkUnit(scope.row)}}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="修改"
            width="70"
           >
            <template slot-scope="scope">
              <el-button type="text"><span class="el-icon-edit-outline"></span></el-button>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              label="选定"
              type="selection"
              width="80">
            </el-table-column>

        </el-table>
        <div  style="position: relative">
          <el-pagination
            align="center"
            style="margin-top: 10px"
            background
            :page-size="selectMsg.pageSize"
            :current-page="selectMsg.currentPage"
            layout="prev, pager, next"
            @current-change="changePage"
            :total="total">
          </el-pagination>

          <div style="position:  absolute;right: 30px;top:-2px">
            <el-button type="info" size="small">删除</el-button>
          </div>

        </div>


      </div>
    </div>

  </div>
</template>

<script>
import SelectByCondition from "../../components/select/InventorySelectByCondition";

import {get, post} from "../../utils/request";
import {INVENTORY_RECORDING_DATA} from "../../utils/basic-data";

export default {
  name: "FindBuyRecording",
  components:{SelectByCondition},
  data(){
    return{
      smallTypeList:[],
      total:0,
      loading:true,
      dataList:[],
      unitList:[],
      selectMsg:{
        currentPage:1,
        pageSize:INVENTORY_RECORDING_DATA,
        warehouseId:null,
        bigTypeId:null,
        smallTypeId:null,
        specification:null,
        showWarehouse3:true,
        showOnlyWarehouse3:false
      }


    }
  },
  mounted() {
    this.firstLoading();
    get("/api/v1/small-type-show",{bigTypeId:2}).then(resp=>{
      this.smallTypeList=resp.data

    })
    get("/api/v1/unit").then(resp=>{
      this.unitList=resp.data
    })
  },
  methods:{
    checkUnitTest(value){
      for (let i = 0; i <this.unitList.length ; i++) {

        if (value.smallType.bigType.unitId===this.unitList[i].unitId){
          return this.unitList[i].unitName

        }
      }
    },
    checkUnit(value){
      var temp=null
      for (let i = 0; i <this.unitList.length ; i++) {

        if (value.smallType.bigType.unitId===this.unitList[i].unitId){
          temp=this.unitList[i].unitName
          return  value.quantity+temp;
        }
      }

    },
    checkType(value){
      if (value.smallType.bigType.bigTypeId===1||value.smallType.bigType.bigTypeId===3){
        return value.long1+"*"+value.wide+"*"+value.high
      }else if (value.smallType.bigType.bigTypeId===2){
        return value.long1+"*"+value.wide
      }else {
        return value.specification
      }

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    selectMsgWay(selectMsg){
      this.loading=true
      this.selectMsg=selectMsg
      this.selectMsg.currentPage=1
      post("/api/v1/inventory/recording",this.selectMsg).then(resp=>{
        this.dataList=resp.data.objectList
        this.total=resp.data.total
        this.loading=false
      })
    },
    firstLoading(){
      this.loading=true
      var  newselectMsg={
        currentPage:1,
        pageSize:INVENTORY_RECORDING_DATA,
        warehouseId:null,
        bigTypeId:null,
        smallTypeId:null,
        specification:null,
        showWarehouse3:true,
        showOnlyWarehouse3:false
      }
      this.selectMsg=newselectMsg
      post("/api/v1/inventory/recording",this.selectMsg).then(resp=>{
        this.dataList=resp.data.objectList
        this.total=resp.data.total
        this.loading=false
      })

    },
    changePage(value){
      this.loading=true
      this.selectMsg.currentPage=value

        post("/api/v1/inventory/recording",this.selectMsg).then(resp=>{
          this.dataList=resp.data.objectList
          this.total=resp.data.total
          this.loading=false

        })


    }
    },



}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #2c3e50;
}
.quantitydetail{
  color: #ff3526;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.find-box-detail{
  width: 1260px;
  margin-left: 15px;
  height: 610px;
  border-radius: 20px;
  background-color: #f2f2f2;
}
h3{
  margin: 0;
}

.find-box{
  height: 674px;
  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
